<template>
  <div class="snapFrame" ref="snapFrame">
    <div class="top-title-box">
      <div class="common-view">人脸抓拍</div>
      <!-- <div class="common-view">车辆抓拍</div> -->
    </div>
    <div class="bottom-content commonColor">
      <div class="content-left">
        <div class="total-box1">
          <div>人脸抓拍总数</div>
          <div class="value-view1 fontSize20 totalColor">
            {{ dataObj.faceTotal }}
          </div>
        </div>
        <div class="img-view">
          <!-- <el-image :src="dataObj.faceSrc" @click.native="faceClick(0)" class="face-img" fit="contain"></el-image> -->
          <img :src="dataObj.faceSrc" @click="faceClick(0)" class="face-img" />
        </div>
        <div class="total-box">
          <div>抓拍时间</div>
          <div class="value-view totalColor">
            {{ dataObj.faceTime }}
          </div>
        </div>
        <div class="total-box">
          <div>抓拍地点</div>
          <div class="value-view totalColor">{{ dataObj.faceLocation }}</div>
        </div>
      </div>
      <div class="content-right">
        <div class="total-box1">
          <!-- <div>车辆抓拍总数</div> -->
          <div>{{ " " }}</div>
          <div class="value-view1 fontSize20 carTotalfColor">
            <!-- {{ dataObj.carTotal }} -->
            {{ " " }}
          </div>
        </div>
        <div class="img-view">
          <!-- <el-image :src="dataObj.carSrc"></el-image> -->
          <!-- <el-image :src="dataObj.carSrc" @click.native="faceClick(1)" class="face-img" fit="contain"></el-image> -->
          <img :src="dataObj.carSrc" @click="faceClick(1)" class="face-img" />
        </div>
        <div class="total-box">
          <div>抓拍时间</div>
          <div class="value-view totalColor">{{ dataObj.carTime }}</div>
        </div>
        <div class="total-box">
          <div>抓拍地点</div>
          <div class="value-view totalColor">{{ dataObj.carLocation }}</div>
        </div>
      </div>
    </div>
    <!-- 预览图片 -->
    <PreviewImageDialog :edit-common-config="editConfig" />
  </div>
</template>

<script>
import PreviewImageDialog from "@/views/panoramicData/components/PreviewImageDialog"
export default {
  components: { PreviewImageDialog },
  props: {
    dataObj: {
      type: Object,
      default: () => {
        return {
          faceTotal: 1256,
          faceTime: "2023-12-25 12:00:00",
          faceLocation: "6栋后面-进",
          faceSrc: "", // require("@/assets/img/sanpImage2.png")
          carTotal: 254,
          carTime: 27,
          carLocation: "停车场",
          carSrc: "" // require("@/assets/img/sanpImage1.png")
        }
      }
    },
    videoPhotoData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      editConfig: {
        visible: false,
        infomation: [],
        currentId: "",
        isLookImg: true
      }
    }
  },
  mounted() {},
  watch: {},
  methods: {
    faceClick(index) {
      console.log(this.videoPhotoData, "看看有值没")
      let sanpObj = this.videoPhotoData.datalist[index].activeObject
      this.editConfig.infomation = this.videoPhotoData.datalist
      this.editConfig.currentId = sanpObj.id
      this.editConfig.personIndex = index
      this.editConfig.visible = true
    }
  }
}
</script>

<style scoped lang="scss">
.snapFrame {
  width: 100%;
  height: calc(100% - 40px);
  background: rgba(3, 10, 14, 0.7);
  border: 1px solid #194871;
  margin-top: 50px;
  position: relative;
  z-index: 3;
  .top-title-box {
    height: 40px;
    width: calc(100% - 40px);
    position: absolute;
    top: -20px;
    left: 40px;
    display: flex;
    .common-view {
      width: 189px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      margin-right: 45px;
      // border: 1px solid #0e9cff;
      background-image: url("/public/panoramicData/rectangle43.png");
      background-position-x: center;
      background-repeat: no-repeat;
      background-size: contain;
      // background: linear-gradient(to top, #00344b, #001d2f 60%);
      color: #01c2ff;
      font-size: 22px;
    }
  }
  .bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 50px 30px;
    height: 100%;
    .content-left,
    .content-right {
      width: calc(50% - 5px);
      height: calc(100% - 40px);
      .total-box,
      .total-box1 {
        margin-top: 20px;
        display: flex;
        align-items: center;
        font-size: 17px;
        height: 26px;
        .value-view,
        .value-view1 {
          margin-left: 20px;
          margin-right: 0px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .value-view {
          width: calc(100% - 90px);
        }
        .value-view1 {
          width: calc(100% - 140px);
        }
      }
      .total-box1 {
        margin-top: 0px;
      }
      .img-view {
        margin: 30px 0;
        width: 100%;
        height: 33.3%;
        // background: #01c2ff;

        .el-image {
          width: 100%;
          height: 100%;
          text-align: left;
        }
        .face-img {
          cursor: pointer;
          width: 100%;
          height: 100%;
          text-align: left;
          object-fit: contain;
        }
      }
    }
  }
}
.commonColor {
  color: rgb(255, 255, 255, 0.8);
}
.totalColor {
  color: #ffab04;
}
.carTotalfColor {
  color: #1dd4ff;
}
.commonVlueColor {
  color: #01c2ff;
}
.fontSize20 {
  font-size: 20px;
  font-weight: 700;
}
</style>
